<template>
  <div id="mySubject">
    <div class="mysubject-title df">
      <div class="left-bar"></div>
      <div>选科方案</div>
    </div>
    <el-table
      v-loading="subjectLoading"
      :data="tableData"
      style="width: 100%"
      :header-cell-style="tableHeaderColor"
      border
    >
      <template #empty>
        <div class="no-data">暂无数据</div>
      </template>
      <el-table-column prop="name" label="选科方案" align="center">
      </el-table-column>
      <el-table-column prop="province" label="省份" width="70" align="center" />
      <el-table-column
        prop="b"
        label="选科组合(意向专业)"
        width="160"
        align="center"
      >
        <template #default="scope">
          <div v-if="$const.subjectCodeMode[scope.row.sgidArray[0][0]]">
            {{ $const.subjectCodeMode[scope.row.sgidArray[0][0]] || '-' }}+{{
              $const.subjectCodeMode[scope.row.sgidArray[0][1]] || '-'
            }}
            +{{ $const.subjectCodeMode[scope.row.sgidArray[0][2]] || '-' }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="b"
        label="选科组合(意向院校)"
        width="160"
        align="center"
      >
        <template #default="scope">
          <div v-if="$const.subjectCodeMode[scope.row.sgidArray[1][0]]">
            {{ $const.subjectCodeMode[scope.row.sgidArray[1][0]] || '-' }}+{{
              $const.subjectCodeMode[scope.row.sgidArray[1][1]] || '-'
            }}
            +{{ $const.subjectCodeMode[scope.row.sgidArray[1][2]] || '-' }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column prop="fromType" label="选科类型" align="center" />
      <el-table-column
        prop="date"
        label="最后编辑时间"
        width="160"
        align="center"
      />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            size="small"
            class="btns"
            link
            type="primary"
            @click="handleEdit(scope.row)"
            >查看</el-button
          >
          <el-button
            class="btns"
            size="small"
            type="primary"
            link
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-model:page="pageDate.page"
      v-model:limit="pageDate.pageSize"
      :total="pageTotal"
      :background="false"
      @pagination="fetchSelectResInfo"
    ></pagination>
  </div>
</template>

<script setup>
import {
  getSelectResInfo,
  getSelectResSave,
} from '@/api/selectSubject/subject';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import Pagination from '@/components/Pagination/index.vue';

const router = useRouter();
const tableData = ref([]);
const subjectLoading = ref(false);
const pageTotal = ref(0);
// 页码
const pageDate = ref({
  fronttype: 2,
  page: 1,
  pageSize: 10,
});
// 编辑
const type = ref('');
const handleEdit = (rowData) => {
  if (rowData.fromType == '智能选科') {
    type.value = '0';
  } else if (rowData.fromType == '自主选科') {
    type.value = '1';
  }
  router.push({
    path: '/smartoptional',
    query: {
      type: type.value,
      id: rowData.id,
    },
  });
};
// 删除
const handleDelete = (index, rowData) => {
  handleSelectResSave(rowData);
};
const handleSelectResSave = (rowData) => {
  let reqData = {
    id: rowData.id,
    operate: 'del',
  };
  getSelectResSave(reqData).then((res) => {
    if (res.data.code == 20000) {
      ElMessage({
        message: res.data.msg,
        type: 'success',
      });
      fetchSelectResInfo();
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
// 修改表头颜色
const tableHeaderColor = () => {
  return { background: '#f2f2f2' };
};
const fetchSelectResInfo = () => {
  subjectLoading.value = true;
  getSelectResInfo(pageDate.value)
    .then((res) => {
      if (res.data.code == 20000) {
        tableData.value = res.data.data;
        pageTotal.value = res.data.total;
        subjectLoading.value = false;
        tableData.value.forEach((v) => {
          v.sgidArray = v.sgid.split('|').map((sgid) => sgid.split(','));
        });
      } else {
        subjectLoading.value = false;
      }
    })
    .catch(() => {
      subjectLoading.value = false;
    });
};
fetchSelectResInfo();
</script>

<style lang="scss" scoped>
#mySubject {
  // flex: 1;
  width: 100%;
  .mysubject-title {
    height: 28px;
    margin: 20px 0;
    .left-bar {
      width: 3px;
      height: 20px;
      margin-right: 10px;
      background: var(--background-color);
    }
  }
}
</style>
